THE CONTEXT
For some years, a new way of working emerged in the world, which allows independent professionals, entrepreneurs and SMEs from different sectors to share the same workspace in order to develop their own professional projects, while promoting joint projects, providing mutual value through the connections generated. These spaces are known as Coworkings.
Coworkings offer different services, including product markets. In Argentina, many of them are self-managed, this means that each person who wants to consume something must pay by leaving cash in a jar.
DESIGN THINKING
To carry out the project, design thinking was applied. This iterative, non-linear design process allowed to understand users, redefine parts of the problem and create an innovative solution. It involves five stages in which various tools were used according to the needs of the project.
EMPATHIZE
INTERVIEWS
Users were interviewed to gather information about their overall experience with purchasing products in the coworks they visited. Of those interviewed, 4 were women and 2 men. All interviewees are between 23 and 55 years old. Through these interviews, it was possible to understand their objectives, needs, motivations and frustrations when buying products from the markets at theirs Coworks.
DEFINE
PROBLEM, GOAL AND SOLUTION
The problem
The problem arises precisely with these product markets, people do not always have cash. In addition, it is difficult to take the change from a jar since they don’t always have the exact amount to pay.
On the other hand, many of the people who work in the coworks have some type of diet, by choice or due to some intolerance. Finally, the value of each product is usually found on paper price lists stuck on the wall which generates discomfort when having to look for the price of what you want to pay.
On the other hand, many of the people who work in the coworks have some type of diet, by choice or due to some intolerance. Finally, the value of each product is usually found on paper price lists stuck on the wall which generates discomfort when having to look for the price of what you want to pay.
The goal
Provide users with the possibility to find, at the different coworks where they usually work, a product that is suitable for their type of diet while providing them with an easy way of viewing their prices so that they don’t have to search for that in a long list at the same time they are able to pay with a debit or credit card.
The solution
Develop a mobile app in which users can search for a product, in a given cowork market, suitable for a type of diet, see the price of it and pay by debit or credit card.
USER PERSONA
In order to define a target audience and design for the real needs of users, a user persona was created based on the research findings. Milagros represents the target demographic of Cowork Market. With it, we can better empathize with the target user throughout the design process.
IDEATE
CARDSORTING
In order to understand the expectations of the users and to evaluate how to build the information architecture of the application, a card sorting activity was carried out.
Optimal Workshop was used as the primary platform to run remote card sorting and validate the results. Ten people were asked to participate in a hybrid cardsorting with no time limit.
Optimal Workshop was used as the primary platform to run remote card sorting and validate the results. Ten people were asked to participate in a hybrid cardsorting with no time limit.
• 90% of the participants created 7 categories and the rest 8
• Participants categorized cards based on usage and product features
INFORMATION ARCHITECTURE
Based on the results of the card classification study, the information architecture was created to plan the structure and organization of the application. This allowed to look at the relationships between the main functionalities and ensure that the flows within the website felt natural to users and met their needs.
Note: Final version obtained after iterating.
TASKFLOW
To better understand how users would navigate the app to find a product and make a purchase, a task flow was created. This allowed to think of different scenarios and ensure that the necessary screens were developed to help the user complete a purchase.
USERFLOW
Next, a userflow was created to show the different paths a user could take to achieve the main task. Creating this userflow helped plan the screens users would need to achieve their goals.
Scroll to the right to see the full flow. It might take a while to load, thanks for your patience.
Note: This is the userflow obtained after iterating.
The following stages of prototyping and testing were done iteratively.
The process began by sketching the main screens. At the time of having this first version in low fidelity, the first user testing was done.
The process began by sketching the main screens. At the time of having this first version in low fidelity, the first user testing was done.
Based on the insights obtained from the tests, the pertinent adjustments were made, but this time taking the screens to medium fidelity, adding more context and including micro-interactions. In this instance, the prototype was subjected to a second test with real users who work in a Cowork using different testing techniques.
Again, after gaining new insights further adjustments were made while bringing the prototype to high fidelity. Patterns of the three most widely used design systems in the market were applied.
PROTOTYPE
LOW FIDELITY
TESTING
OFFLINE TESTING
After sketching the wireframes in low fidelity, they were printed to do an offline test with six different users. The benefit of testing on a paper prototype in this instance was that the solution could be simulated quickly, simply, and cost-effectively. In this way, insights could be obtained quickly to generate improvements on the proposed solution.
Goals
• Observe how users navigate through Cowork Market
• Observe if users can complete assigned tasks
• Identificar cualquier frustración, dificultad, etc. del usuario
Assigned Tasks
• Scan a product
• Search for a snack
• Search for a yogurt
• Add a product to the cart
• Buy a product and pay for it with a debit card
• Search for a snack
• Search for a yogurt
• Add a product to the cart
• Buy a product and pay for it with a debit card
Results
After the testing, very valuable feedback was obtained that served to continue improving. From this, the information architecture and the userflow were iterated.
PROTOTYPE
MEDIUM FIDELITY
After doing the first test with the users and making the pertinent adjustments in the information architecture and the userflow, improvements to the prototype continued by adding more quantity of real text.
On the other hand, it was decided to build a wireflow based on the prototype and the userflow to be able, in addition to detailing the design ideas, to show how some screens would change dynamically according to the interactions made by the users. This implied the development of a greater number of screens.
Scroll to the right to see the full flow. It might take a while to load, thanks for your patience.
TESTING
A/B TESTING
It was decided to generate design variations of some of the main flow wireframes and then submit these variations to A/B testing to determine which ones generated better metrics and were better suited to the needs of the users.
These tests were carried out in a Coworking space with ten users. Five of them were randomly selected and they were given flow 1 with variations A, flow 2 with variations B to the rest.
Goals
• Observe if users can complete assigned tasks
• Identify any frustrations, difficulties, etc. of the user
• Measure how long users take to complete each task
• Count the number of clicks they make to complete the tasks
• Measure the degree of user satisfaction when performing the tasks
• Determine which design variation generates the highest conversion rate
• Measure how long users take to complete each task
• Count the number of clicks they make to complete the tasks
• Measure the degree of user satisfaction when performing the tasks
• Determine which design variation generates the highest conversion rate
Assigned Tasks
• Search for carrot chips
• Buy carrot chips
• Pay with Mastercard card
• Add sweet potato chips to cart
• Buy carrot chips
• Pay with Mastercard card
• Add sweet potato chips to cart
Wireframe Variants
For the task of looking for carrot chips, the one with the highest conversion rate was Flow 2, not only because all users completed the task, but also because it was done in the shortest time. Although Flow 1 is the winner based on the number of steps taken, it was possible to choose Flow 2 because it is the one that obtained the best results in average.
For the tasks of buying the carrot chips and paying with the Mastercard, once again the winner is Flow 2 for its shortest time and less steps required.
Finally, for the task of adding the sweet potato chips to the shopping cart, we could consider at first that it is a "tie" since Flow 2 is the winner according to time and Flow 1 is the winner according to the number of steps. However, analyzing the notes taken for each test, the button with the cart icon of Flow 1 in the list of products and in the product detail, has generated problems for some users. For example, user 5 of the flow 1 was doubtful to complete the task due to this, since she added the product directly from the product list. User 2 of Flow 1 mentioned “this must be a shortcut to open the shopping cart, right?”. For these reasons, the Flow 2 is again chosen for this last task.
WIZARD OF OZ
It was decided to do a Wizard of Oz test to visualize how users would interact in their natural environment with the application. A user was given the task of scanning a product with his cell phone and paying for it with his credit card.
From this test, it was possible to identify that a legend indicating to focus on the barcode or QR code should be displayed when the camera is opened to scan the product. Likewise, the task was successfully completed.
PROTOTYPE
MOOODBOARD
It was necessary to define the theme and the visual spirit of the project. For this reason, it was decided to create a moodboard based on keywords. This tool helped to define what was wanted to be transmitted to the users.
DESIGN SYSTEM
It was necessary to create a design system for several reasons. To start with, to achieve visual consistency and ensure that certain navigation and interaction mental patterns are met. Also, to establish the tone of voice with which to speak to users.
Moreover, to generate a components library that could be reused and that contributes to better communication with the development team and that allowed to scale the application in the future.
When having to choose a platform on which to create the design system, a closed survey was done with 40 users who work in a Cowork to find out the type of operating system they use.
Due to the results of the survey, it was decided to create the design system in this first stage of the roadmap based on the Human Interface Design System developed by Apple. For a second stage, it will continue with Google's Material Design 3 for Android.
UI KIT
Note: Final version of the UI KIT after iterating when applying accessibility.
HIGH FIDELITY
Once the design system was created, it was applied to the medium fidelity prototype in order to bring it to high fidelity. Below you can see on some screens of how it evolved.
Note: Final version of the prototype after iterating when applying accessibility.
ACCESSIBILITY
According to a survey by ITPCD, 15% of the world's population, or 1 billion population, experience some type of disability, and the prevalence of this is higher in developing countries.
That is why it was decided to continue iterating the prototype in order to guarantee that all people can use the application, complete the tasks and not feel frustrated.
To achieve this, the guidelines of the W3C "World Wide Web Consortium" were followed.
Here are some examples:
THE SAME FRAME BUT DIFFERENT
Although according to the survey done before, the majority of users in the Coworks use iOS, it is necessary to consider minorities, that is why some frames began to be prototyped according to 3 design systems. They have subtle changes, but they contribute to generate a better experience for each type of user.
FINAL FUNCTIONAL PROTOTYPE
Go to the prototype or you can watch the following video:
CONCLUSIONS
This project meant a great challenge for me since there is nothing similar on the market. A lot of research had to be done on site of how the day-to-day life of people in different coworking spaces was. However, getting over this obstacle was an invaluable experience and prepared me to work with innovative projects.
Also, I learned that not all UX tools are equally useful for all projects, you have to know which one to use in each situation.
Given the time constraints, there could have been more research on the owners of these spaces to continue iterating the project and thus cover the different user personas involved in Cowork Market.
NEXT STEPS
• Work with developers and software architects to get started with development
• Continue organizing and improving design deliverables.
• Create more userflows to map out the unhappy paths that users might face.
• Continue doing with user testing to discover more areas for improvement.
• Finalize the design of the prototype for Android (Material Design 3)
• Continue organizing and improving design deliverables.
• Create more userflows to map out the unhappy paths that users might face.
• Continue doing with user testing to discover more areas for improvement.
• Finalize the design of the prototype for Android (Material Design 3)
